<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body >
    <div id="app">

        <!-- v-show v-if -->
        <h2 v-show="isShow">{{msg}}</h2>


        <!--绑定事件 单击事件  @click-->
        <input type="button" value="展示" @click="show">
        <input type="button" value="隐藏" @click="hidden">
        <input type="button" value="切换显示状态" @click="changeState">

        <input type="button" value="切换显示状态,另一种方法" @click="isShow=!isShow">

    </div>
</body>
</html>
<!--引入vue js文件-->
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//指定vue实例作用范围,
        data:{    //用来给vue实例定义数据
            msg:"hello vue",
            isShow:false,
        },
        methods:{//用来给vue实例定义事件处理函数
            show(){ //用来展示文本
                this.isShow = true;
            },
            hidden(){ //用来隐藏的
                this.isShow = false;
            },
            changeState(){ //切换显示状态
                this.isShow = !this.isShow; //切换
            },

        }
    });
</script>